<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/resources/font/css/font-awesome.min.css" media="all">
	<link rel="stylesheet" href="/resources/css/public.css" media="all">
	<style>
		.layui-card {border:1px solid #f2f2f2;border-radius:5px;}
		.icon {margin-right:10px;color:#1aa094;}
		.icon-blue {color:#1e9fff!important;}
		.layuimini-qiuck-module {text-align:center;margin-top: 10px}
		.layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
		.layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
		.welcome-module {width:100%;height:210px;}
		.panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
		.panel-body {padding:10px}
		.panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
		.label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
		.main_btn > p {height:40px;}
		.layui-bg-number {background-color:#F8F8F8;}
	</style>
</head>
<body>
<div class="layui-row layui-col-space15">
	<!--    <div class="layui-col-md8">-->
	<div class="layui-row layui-col-space15">
		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header"><i class="fa fa-warning icon"></i>数据统计</div>
				<div class="layui-card-body">
					<div class="welcome-module">
						<div class="layui-row layui-col-space10">
							<div class="layui-col-xs6" shiro:hasPermission="student:view">
								<div class="panel layui-bg-number">
									<div class="panel-body">
										<div class="panel-title">
											<span class="label layui-bg-blue">实时</span>
											<h1 id="userNumber" class="no-margins"></h1>
											<h5>当前学生统计总数</h5>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-xs6" shiro:hasPermission="leave:view">
								<div class="panel layui-bg-number">
									<div class="panel-body">
										<div class="panel-title">
											<span class="label layui-bg-cyan">实时</span>
											<h1 id="leaveNumber" class="no-margins"></h1>
											<h5>当前请假记录总数</h5>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-xs6">
								<div class="panel layui-bg-number" shiro:hasPermission="leave:view">
									<div class="panel-body">
										<div class="panel-title">
											<span class="label layui-bg-orange">实时</span>
											<h1 id="unBackOutLeaveNumber" class="no-margins"></h1>
											<h5>待销假记录总数</h5>
										</div>
									</div>
								</div>
							</div>
							<div class="layui-col-xs6">
								<div class="panel layui-bg-number" shiro:hasPermission="leaveApproval:view">
									<div class="panel-body">
										<div class="panel-title">
											<span class="label layui-bg-green">实时</span>
											<h1 id="unApprovedLeaveNumber" class="no-margins"></h1>
											<h5>待审批记录总数</h5>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md6">
			<div class="layui-card">
				<div class="layui-card-header"><i class="fa fa-credit-card icon icon-blue"></i>快捷入口</div>
				<div class="layui-card-body">
					<div class="welcome-module">
						<div class="layui-row layui-col-space10 layuimini-qiuck">
							<div shiro:hasPermission="tutor:view"  class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/sys/toTutorManager" data-title="辅导员管理">
									<i class="fa fa-user-circle"></i>
									<cite>辅导员管理</cite>
								</a>
							</div>
							<div shiro:hasPermission="teacher:view"  class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/sys/toTeacherManager" data-title="教师管理">
									<i class="fa fa-user-o"></i>
									<cite>教师管理</cite>
								</a>
							</div>
							<div shiro:hasPermission="student:view" class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toStudentManager" data-title="学生管理">
									<i class="fa fa-user"></i>
									<cite>学生管理</cite>
								</a>
							</div>
							<div shiro:hasPermission="leave:create" class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toLeaveApply" data-title="请假申请">
									<i class="fa fa-pencil-square-o"></i>
									<cite>请假申请</cite>
								</a>
							</div>
							<div shiro:hasPermission="leave:backout" class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toLeaveBackoutApply" data-title="销假申请" data-icon="fa fa-dot-circle-o">
									<i class="fa fa-wpforms"></i>
									<cite>销假申请</cite>
								</a>
							</div>
							<div shiro:hasPermission="leave:view"  class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toLeaveRecord" data-title="请假记录" data-icon="fa fa-calendar">
									<i class="fa fa-calendar"></i>
									<cite>请假记录</cite>
								</a>
							</div>
							<div shiro:hasPermission="leaveApproval:view" class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toLeaveApproval" data-title="待审批申请" data-icon="fa fa-star-o">
									<i class="fa fa-star-o"></i>
									<cite>待审批申请</cite>
								</a>
							</div>
							<div shiro:hasPermission="leaveApprovalCheck:view" class="layui-col-xs3 layuimini-qiuck-module">
								<a href="/stu/toLeaveApprovalCheck" data-title="已审批申请" data-icon="fa fa-star">
									<i class="fa fa-star"></i>
									<cite>已审批申请</cite>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-header"><i class="fa fa-line-chart icon"></i>数据统计</div>
				<div class="layui-card-body">
					<div id="echarts-records" style="width: 100%;min-height:500px"></div>
				</div>
			</div>
		</div>
	</div>
	<!--    </div>-->
</div>
<script src="/resources/layui/layui.js" charset="utf-8"></script>
<script src="/resources/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/resources/js/jquery-3.4.1.min.js" charset="utf-8"></script>

<script type="text/javascript">
	layui.use(['echarts'], function () {
		var $ = layui.jquery,
				echarts = layui.echarts;
		/**
		 * 报表功能
		 */
		$.ajax({
			"url": "/resources/json/data.json",
			"type": "GET",
			"success": function (data) {
				var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
				var optionRecords = {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: data.legend
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						data: data.day
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: data.legend[0],
							type: 'line',
							data: data.pageView
						},
						{
							name: data.legend[1],
							type: 'line',
							data: data.activeUserNumber
						},
						{
							name: data.legend[2],
							type: 'line',
							data: data.leaveApplyNumber
						},
						{
							name: data.legend[3],
							type: 'line',
							data: data.leaveApproveNumber
						}
					]
				};
				echartsRecords.setOption(optionRecords);

				// echarts 窗口缩放自适应
				window.onresize = function () {
					echartsRecords.resize();
				}
			}
		});

		$.ajax({
			"url": "/datas/loadAllDatas",
			"type": "GET",
			"success": function (data) {
				$('#userNumber').html(data.studentNumber);
				$('#leaveNumber').html(data.leaveNumber);
				$('#unBackOutLeaveNumber').html(data.unBackOutLeaveNumber);
				$('#unApprovedLeaveNumber').html(data.unApprovedLeaveNumber);
			}
		});
	})

</script>
</body>
</html>
